
<template>
  <el-card>
    <el-row type="flex" justify="space-between" style="width: 100%">
      <el-form :inline="true">
        <el-form-item>
          <el-input
            placeholder="根据用户名搜索"
            size="small"
            v-model.trim="queryData.title"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="clearHandler">清空</el-button>
          <el-button size="small" type="primary" @click="initData"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item> </el-form-item>
      </el-form>
      <div>
        <el-button
          size="small"
          icon="el-icon-edit"
          type="success"
          @click="addHandler"
          >新增权限组</el-button
        >
      </div>
    </el-row>

    <!-- el-tag -->
    <el-tag style="width: 100%; margin-bottom: 10px" type="info">
      <i class="el-icon-warning-outline" style="font-size: 14px"></i>
      {{ `${count}条记录` }}
    </el-tag>

    <!-- el-table -->
    <el-table :data="list">
      <el-table-column type="selection"></el-table-column>
      <el-table-column
        label="用户名"
        prop="title"
        align="center"
      ></el-table-column>
      <el-table-column
        label="日期"
        sortable
        prop="create_date"
        align="center"
      >
      <template slot-scope="{row}">{{row.create_date|timer}}</template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button
            circle
            size="small"
            type="primary"
            icon="el-icon-edit"
            v-if="row.id !== 2"
            @click="getUserPermissionInfo(row)"
          ></el-button>
          <el-button
            circle
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="delHandler(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-row type="flex" justify="end" style="margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </el-row>

    <!-- dialog -->
    <el-dialog
      :title="this.formData.id ? '编辑权限组':'创建权限组'"
      :visible.sync="showDialog"
      @close="closeHandler"
    >
      <el-row type="flex" justify="center">
        <el-form
          label-width="120px"
          :model="formData"
          ref="form"
          :rules="formRules"
        >
          <el-form-item
            label="用户名"
            size="small"
            style="width: 400px"
            prop="title"
          >
            <el-input v-model="formData.title"></el-input>
          </el-form-item>
          <el-form-item label="权限分配">
            <el-tree
              :data="permissiontreeList"
              :props="{ label: 'title', children: 'points' }"
              show-checkbox
              :default-checked-keys="checkedList"
              ref="tree"
              v-if="showDialog"
              node-key ="id" 
            >
            </el-tree>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row type="flex" justify="end">
        <div>
          <el-button size="small" @click="showDialog = false">取消</el-button>
          <el-button size="small" type="primary" @click="onSubmit"
            >确定</el-button
          >
        </div>
      </el-row>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getPermissionListApi,
  delPermissionApi,
  getMenuListApi,
  addUserPermissionApi,
  getUserPermissionInfoApi,
  editUserPermissionApi,
} from "@/api/permissions";

export default {
  name: "PermissionsPage",
  data() {
    return {
      count: 0,
      showDialog: false,
      queryData: {
        page: 1,
        pagesize: 10,
        title: "",
      },
      formData: {
        title: "",

      },
      formRules: {
        title: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
      },
      permissiontreeList: [],
      checkedList: [],
      list: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      let { list, counts } = await getPermissionListApi(this.queryData);
      this.list = list;
      this.count = counts;
      // let arr = [];
      // console.log(this.list.map(item => item.update_date.replace('T',' ').replace('.000Z','')))
      // arr = this.list.map((item) =>
        // item.create_date.replace("T", " ").replace(".000Z", "")
      // );
      // arr.forEach((item, index) => (this.list[index].create_date = item));
      // console.log(this.list)
    },
    // 清空
    clearHandler() {
      (this.queryData.title = ""), this.initData();
    },
    // 删除
    async delHandler(id) {
      console.log(id);
      await this.$confirm("确定删除吗?"), await delPermissionApi(id);
      this.$message.success("删除成功");
      // 分页器边缘判断
      if (this.queryData.page !== 1 && this.list.length === 1) {
        this.queryData.page--;
      }
      this.initData();
    },
    //每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryData.pagesize = val;
      this.initData()
    },
    //页码
    handleCurrentChange(val) {
      console.log(`当前 ${val} 页`);
      this.queryData.page = val;
      this.initData()
    },
    // 获取权限数据
    async addHandler() {
      let res = await getMenuListApi();
      console.log(res);
      this.permissiontreeList = res;
      this.showDialog = true;
    },

    // 获取用户权限详情
    async getUserPermissionInfo(row) {
      let res = await getUserPermissionInfoApi(row.id);
      console.log(res);
      this.formData = res;
      this.checkedList = res.permissions;
      // this.formData.title = res.title
      this.showDialog = true;
    },
    // 提交逻辑操作
    async onSubmit() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        console.log(error);
        this.$message.error("表单校验不通过");
      }

      let selectTreeKeys = this.$refs.tree.getCheckedKeys();
      if (selectTreeKeys.length === 0) return this.$message.warning("请勾选");
      this.formData.permissions = selectTreeKeys;
      console.log(selectTreeKeys);

      if (this.formData.id) {
        await editUserPermissionApi(this.formData);
        this.$message.success("修改权限成功");
        this.showDialog = false;
      } else {
        await addUserPermissionApi(this.formData);
        this.$message.success("添加权限成功");
        this.showDialog = false;
      }
      this.initData()
    },
    // 弹窗关闭
    closeHandler() {
      console.log("弹窗关闭");
      this.showDialog = false;
      this.formData = {};
      this.$refs.form.clearValidate();
      this.checkedList = []
    },
  },
};
</script>

<style lang="scss" scoped>
// 弹窗信息
::v-deep .el-dialog__header {
  background: #66b1ff;

  .el-icon-close:before {
    color: #fff;
  }

  .el-dialog__title {
    color: #fff;
  }
}
::v-deep .color{
  background-color: #f5f5f5;
  // background: red;

}
</style>

